<template>
    <!-- 头部位置 -->
    <div class="city-header">
        <div class="go-back">
            <img src=""
                alt="" />
            <div class="title">请选择观影城市 · {{ store.state.choseCityInfo.name }}</div>
        </div>
        <van-search show-action placeholder="请输入搜索关键词" background="#f1f1f1" />
    </div>
    <div class="point">
        <h2>GPS定位你所在城市</h2>
        <div class="onecity">广州</div>
    </div>
    <div class="hotcity">
        <h2>热门城市</h2>
        <div class="hcity">
            <div class="onecity" @click="chooseCity('北京')">北京</div>
            <div class="onecity" @click="chooseCity('深圳')">深圳</div>
            <div class="onecity" @click="chooseCity('广州')">广州</div>
            <div class="onecity" @click="chooseCity('上海')">上海</div>
        </div>
    </div>
    <!-- 城市信息 -->
    <van-index-bar :index-list="indexList" highlight-color="#ff0000">
        <div v-for="item in dataList" :key="item.index">
            <van-index-anchor :index="item.index" style="background:#ccc"></van-index-anchor>
            <van-cell v-for="(sub, key) in item.data" :title="sub.name" :key="sub.name + key"
                @click="chooseCity(sub.name)" />
        </div>
    </van-index-bar>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { cityListData } from "../api/api";


const store = useStore();
console.log(store);


// 索引
const indexList = ref<Array<any>>([])
// 城市列表
const dataList = ref<Array<any>>([])

onMounted(async () => {
    let res = await cityListData()
    console.log(res);
    indexList.value = res[1];
    dataList.value = res[0];
})

// 点击选择了一个城市
const router = useRouter();
const chooseCity = (city: string) => {
    let cityId = 0;
    // 需要通过 name 去查找 cityID
    // 在城市列表中匹配到对应的城市 ID
    dataList.value.forEach(item => {
        item.data.forEach((one: any) => {
            if (one.name === city) {
                cityId = one.cityId
            }
        })
    })
    if (cityId === 0) {
        cityId = 440300;
        city = "深圳"
    }
    // 需要修改 store 中保存的状态值
    // store.commit('MSetChoseCity')
    store.dispatch('ASetChoseCity', {
        id: cityId,
        name: city
    })
    router.push("/cinema")
}


</script>

<style scoped lang='scss'>
.city-header {
    .go-back {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 50px;

        img {
            width: 30px;
            padding: 0 5px;
        }

        .title {
            margin-right: 10px;
            font-size: 15px;
            color: #888;
        }
    }
}

.point,
.hotcity {
    margin: 20px 20px 20px;

    h2 {
        font-size: 13px;
        color: #797d82;
        margin-bottom: 10px;
        font-weight: normal;
    }

    .onecity {
        height: 30px;
        background-color: #f4f4f4;
        line-height: 30px;
        border-radius: 3px;
        box-sizing: border-box;
        font-size: 14px;
        color: #191a1b;
        display: inline-block;
        padding: 0 10px;
        margin-right: 20px;
    }
}
</style>

<!-- 
    这个快捷输入是 VScode IDE 工具的功能，有你就用，没有你就自己写 
    作为新手不要太依赖这些过分快捷的输入，多写写加深印象终究是更好的
-->